<template>
  <div class="container">
    <!-- <topTitle :titleText="titleText" :back="back" @gobackTriser="toList"></topTitle> -->
    <div class="topCon">
      <el-row class="topContent">
        <el-col :span="14">
          <div>
            <i class="icon iconfont iconfanhui1" @click="toList"></i>
            <span class="titleTop">待完善信息</span>
          </div>
        </el-col>
        <el-col :span="10" class="alignRight">
          <div>
            <el-link
              type="primary"
              @click="downloadcontractform"
              class="uploadBtn"
              >下载合同模板</el-link
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="164px"
        class="demo-ruleForm"
      >
        <!-- 身份信息 -->
        <div class="identityInfoTitle titleInfo">身份信息</div>
        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeName" label="人员姓名：">
                    <el-input
                      v-model="formData.employeeName"
                      id="employeeName"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="idCard" label="身份证号：">
                    <el-input
                      v-model="formData.idCard"
                      id="idCard"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeSex" label="人员性别：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.employeeSex"
                      id="employeeSex"
                      placeholder=""
                      disabled
                    >
                      <el-option
                        v-for="item in sexOption"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="employeeBirth" label="出生日期：">
                    <el-input
                      v-model="formData.employeeBirth"
                      id="employeeBirth"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item prop="employeeNation" label="人员民族：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.employeeNation"
                      id="employeeNation"
                      placeholder=""
                      disabled
                    >
                      <el-option
                        v-for="item in nationOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="家庭住址：" prop="homeAddress">
                    <el-input
                      v-model="formData.homeAddress"
                      id="homeAddress"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6">
            <input name="image64" type="hidden" id="image64" />
            <div id="readIdCardBox">
              <ul>
                <li style="padding-left: 45px">
                  <img
                    :src="idcardUrl ? idcardUrl : errorPath"
                    id="cardImg"
                    style="width: 100px"
                  />
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <!-- 基础信息 -->
        <el-row>
          <el-col class="basicInfoTitle titleInfo">
            <div>基础信息</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="工资卡银行：" prop="bankId">
                    <el-select
                      class="selectWidth"
                      v-model="formData.bankId"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in bankOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="银行卡号：" prop="accountId">
                    <el-input
                      v-model="formData.accountId"
                      @blur="formData.accountId = changeValue($event)"
                      placeholder="请输入银行卡号"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="手机号码：" prop="tel">
                    <el-input
                      v-model="formData.tel"
                      @blur="formData.tel = changeValue($event)"
                      placeholder="请输入手机号码"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="文化程度：" prop="edu">
                    <el-select
                      class="selectWidth"
                      v-model="formData.edu"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in eduOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="政治面貌：" prop="politicalStatus">
                    <el-select
                      class="selectWidth"
                      v-model="formData.politicalStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in politicalOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="婚姻状况：" prop="maritalStatus">
                    <el-select
                      class="selectWidth"
                      v-model="formData.maritalStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in marrigeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <!-- 合同信息 -->
        <el-row>
          <el-col class="contractInfoTitle titleInfo">
            <div>合同信息</div>
          </el-col>
        </el-row>
        <el-row class="identityInfo">
          <el-col :span="18">
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="项目名称：" prop="projectName">
                    <el-input
                      v-model="formData.projectName"
                      placeholder=""
                      disabled
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="参建单位：" prop="uscc">
                    <el-select
                      class="selectWidth"
                      v-model="formData.uscc"
                      @change="handleChange"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in usccOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="选择班组：" prop="groupId">
                    <el-select
                      class="selectWidth"
                      v-model="formData.groupId"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in groupIdOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="type">
                    <span slot="label">
                      人员类型
                      <el-tooltip
                        content="请将选择类型为非务工人员与班组长时，将其归属为项目组，如无项目组请前往班组管理新建"
                        placement="top"
                        effect="dark"
                      >
                        <i class="icon iconfont iconhuabanfuben"></i>
                      </el-tooltip>
                      ：
                    </span>
                    <el-select
                      class="selectWidth"
                      v-model="formData.type"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="工种：" prop="workType">
                    <el-select
                      class="selectWidth"
                      v-model="formData.workType"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in workTypeOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item prop="date" label="雇佣周期：">
                    <el-date-picker
                      v-model="formData.date"
                      type="daterange"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="考勤卡号：" prop="attNo">
                    <el-input
                      v-model.trim="formData.attNo"
                      placeholder="请输入考勤卡号"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="计量单位：">
                    <el-select
                      class="selectWidth"
                      v-model="formData.unit"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in unitOptions"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="11">
                  <el-form-item label="计量单价：" prop="price">
                    <el-input
                      v-model="formData.price"
                      placeholder="请输入计量单价"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="1" class="wageUnit"> 元 </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="上传合同或资质附件：">
              <uploadAnnex
                @getFileList="getFileList"
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" v-model="formData.contractImgUrl">
            <uploadResult
              style="margin-left: 120px"
              :resultList="upLoadFile"
              @callBackResult="callBackResult"
            />
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin-top: 20px">
          <el-col :span="18">
            <el-form-item>
              <el-button
                class="commonBut saveBtn"
                type="primary"
                @click="saveToList"
                :loading="isSaveLoading"
                >保存</el-button
              >
              <el-button class="commonBut" @click="toList">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import uploadResult from '@/components/publicCom/uploadResult'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'improvedEmployeeAddJz',
  components: {
    uploadResult,
  },
  data() {
    return {
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        messageFileSizetip: '最多能上传5M以内的附件', //自定义id解决一个页面包含多个上传附件
        messagetip: '合同附件支持png，jpg，jpeg，pdf，最多可上传5个附件', //自定义报错提示语
        formatType: 'typeFive', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip: ' 合同附件支持png，jpg，jpeg，pdf，最多可上传5个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
      },
      titleText: '待完善信息',
      back: true,
      formData: {
        employeeName: '', //人员姓名
        idCard: '', //身份证号
        employeeSex: '', //性别
        employeeBirth: '', //出生日期
        tel: '', //手机号码
        employeeNation: '', //名族
        homeAddress: '', //家庭住址
        edu: '', //教育程度
        politicalStatus: '', //政治面貌
        maritalStatus: '', //婚姻状况
        bankId: '', //工资银行
        accountId: '', //工资卡号
        projectName: '', //项目名称
        uscc: '', //参建单位
        type: '', //人员类型
        groupId: '', //班组
        workType: '', //工种
        date: [], //雇佣周期
        attNo: '', //考勤卡号
        unit: '', //计量单位
        price: '', //计量单价
        // startDate: "", //雇佣开始时间
        // endDate: "" , //雇佣结束时间
        employeeImgUrl: [], //员工身份证头像
        contractImgUrl: [], //合同附件
      },
      idcardUrl: '', //员工身份证头像
      errorPath: require('../../../static/img/employee/card.png'),
      sexOption: [],
      nationOptions: [],
      bankOptions: [],
      eduOptions: [],
      marrigeOptions: [],
      usccOptions: [],
      typeOptions: [],
      politicalOptions: [],
      workTypeOptions: [],
      unitOptions: [],
      formRules: {
        date: [
          {
            required: true,
            message: '请选择雇佣周期',
            trigger: 'blur',
          },
        ],
        tel: [
          {
            // required: true,
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
        accountId: [
          {
            // required: true,
            pattern: /^\d{15,19}$/,
            message: '请输入15-19 位纯数字的银行卡号',
            trigger: 'blur',
          },
        ],
        uscc: [
          {
            required: true,
            message: '请选择参建单位',
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请选择人员类型',
            trigger: 'blur',
          },
        ],
        groupId: [
          {
            required: true,
            message: '请选择班组',
            trigger: 'blur',
          },
        ],
        workType: [
          {
            required: true,
            message: '请选择工种类型',
            trigger: 'blur',
          },
        ],
        projectName: [
          {
            required: true,
            message: '项目名称不能为空',
            trigger: 'blur',
          },
        ],
        price: [
          {
            // required: true,
            pattern: /^\d{1,7}(\.\d{0,2})?$/,
            message: '已超过金额最大值，请重新输入',
            trigger: 'blur',
          },
        ],
        attNo: [
          {
            pattern: /^\d{11}$/,
            message: '请输入11位纯数字',
            trigger: 'blur',
          },
        ],
      },
      employeeId: '', //务工id
      projectId: '',
      detail: '',
      contractId: '', //合同id
      upLoadFile: [], //附件
      cardFile: [],
      srcList: [],
      oldSrcList: [],
      isSaveLoading: false, // 保存loading
      qrCode_Url: '', //二维码
      czSrc: require('../../../static/img/employee/card.png'),
    }
  },
  created() {
    this.$store.commit('SET_INFO', ['groupIdOptions', []])
    this.employeeId = this.$route.query.employeeId
    this.projectId = this.$route.query.projectId
    this.detail = this.$route.query.detail
    this.formData.projectName = this.$route.query.projectName
    //参建单位
    this.getUscc()
    //字典表下拉框
    this.getSelectData('SEX')
    this.getSelectData('NATION')
    this.getSelectData('EDU')
    this.getSelectData('MARRIAGE')
    this.getSelectData('POLITICAL')
    this.getSelectData('BANK_TYPE')
    this.getSelectData('EMPLOYEE_TYPE') //人员类型
    this.getSelectData('WORKER_TYPE') //工种
    this.getSelectData('UNIT') //计量单位
    this.getBatchInfo(this.employeeId)
  },
  mounted() {},
  computed: {
    ...mapState(['groupIdOptions']),
  },
  methods: {
    ...mapActions(['getGroupList']),
    /**
     * @description: 获取上传的附件
     */
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    /**
     * @description: 获取上传的附件
     */
    getFile(val) {
      this.upLoadFile = val
    },
    //获取默认uscc 参建单位
    getCheck() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/application/expend/detail',
        data: {
          id: this.detail,
        },
      })
        .then((response) => {
          this.formData.uscc = response.data.result.uscc
          setTimeout(() => {
            this.getGroupList({
              projectId: this.projectId,
              uscc: this.formData.uscc,
            })
          }, 200)
        })
        .catch((error) => {})
    },
    getUscc(uscc) {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/findbyprojectid',
        data: {
          projectId: this.projectId,
          uscc: uscc,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.usccOptions = response.data.result
            // this.getCheck();
            setTimeout(() => {
              this.getCheck()
            }, 200)
          }
        })
        .catch((error) => {
          this.$message.error('参建单位数据获取失败')
        })
    },
    handleChange() {
      var uscc = this.formData.uscc
      if (!uscc) {
        this.formData.groupId = ''
        this.$store.commit('SET_INFO', ['groupIdOptions', []])
      } else {
        this.getGroupList({
          projectId: this.projectId,
          uscc: this.formData.uscc,
        })
        this.formData.groupId = ''
      }
    },

    getSelectData(dicitemType) {
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: {
          type: dicitemType,
        },
      })
        .then((response) => {
          if (dicitemType == 'SEX') {
            this.sexOption = response.data.result
          } else if (dicitemType == 'NATION') {
            this.nationOptions = response.data.result
          } else if (dicitemType == 'EDU') {
            this.eduOptions = response.data.result
          } else if (dicitemType == 'MARRIAGE') {
            this.marrigeOptions = response.data.result
          } else if (dicitemType == 'POLITICAL') {
            this.politicalOptions = response.data.result
          } else if (dicitemType == 'BANK_TYPE') {
            this.bankOptions = response.data.result
          } else if (dicitemType == 'EMPLOYEE_TYPE') {
            this.typeOptions = response.data.result
          } else if (dicitemType == 'WORKER_TYPE') {
            this.workTypeOptions = response.data.result
          } else if (dicitemType == 'UNIT') {
            this.unitOptions = response.data.result
          }
        })
        .catch((response) => {})
    },
    getBatchInfo(employeeId) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/build/expand/detail',
        data: {
          employeeId: employeeId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.formData.employeeName = data.name
          this.formData.idCard = data.idcard
          this.formData.employeeSex = data.sex
          this.formData.employeeBirth = data.birthday
          this.formData.employeeNation = data.nationality
          this.formData.homeAddress = data.address
          this.idcardUrl = data.idcardPhoto
          // $("#cardImg").attr("src", data.idcardPhoto);
        })
        .catch((error) => {})
    },
    //返回列表
    toList() {
      this.$router.push({
        path: '/home/employee/projectEmployeeApply',
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/projectEmployeeApply',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //保存跳转到详情
    saveToList() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // 保存更新
          // this.isSaveLoading = true;
          // this.submitFormUptate();
          //班组长替换
          this.replaceGroup('add')
        } else {
          return false
        }
      })
    },
    replaceGroup(typeName) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/findgroupleader',
        data: {
          projectId: this.projectId,
          uscc: this.formData.uscc,
          groupId: this.formData.groupId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              //1.存在班组长  2.当前选择班组长 就弹框提示
              if (
                response.data.result.name &&
                this.formData.type == '70' &&
                this.formData.idCard != response.data.result.idCard
              ) {
                this.showTip(response.data.result.name)
              } else {
                this.isSaveLoading = true
                this.submitFormUptate()
              }
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    showTip(oldGroup) {
      var html =
        '<div>该班组已设置班组长' +
        oldGroup +
        ',是否替换为' +
        this.formData.employeeName +
        '？替换后' +
        oldGroup +
        '将自动离职' +
        '</div>'
      this.$confirm(html, '提示', {
        dangerouslyUseHTMLString: true,
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then((action) => {
          this.isSaveLoading = true
          this.submitFormUptate()
        })
        .catch(() => {})
    },
    submitFormUptate() {
      var data = {
        projectId: this.projectId,
        employeeId: this.employeeId,
        name: this.formData.employeeName,
        idcard: this.formData.idCard,
        address: this.formData.homeAddress,
        birthdayStr: this.formData.employeeBirth,
        tel: this.formData.tel,
        edu: this.formData.edu,
        nationality: this.formData.employeeNation,
        sex: this.formData.employeeSex,
        politicalStatus: this.formData.politicalStatus,
        maritalStatus: this.formData.maritalStatus,
        bankId: this.formData.bankId,
        account: this.formData.accountId,
        projectName: this.formData.projectName,
        uscc: this.formData.uscc,
        type: this.formData.type,
        groupId: this.formData.groupId,
        workType: this.formData.workType,
        startDate: this.formData.date[0],
        endDate: this.formData.date[1],
        attNo: this.formData.attNo,
        unit: this.formData.unit,
        price: this.formData.price,
        // employeeImgUrl: this.idcardUrl,
        contractImgUrl: JSON.stringify(this.upLoadFile),
      }
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/complete',
        data: data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.$router.push({
              path: '/home/employee/projectEmployeeApply',
            })
            this.$store.commit('CHANGE_SLIDER_NAME', {
              oldUrl: '/home/employee/projectEmployeeApply',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },

    delFile(index) {
      this.upLoadFile.splice(index, 1)
      this.srcList.splice(index, 1)
      this.oldSrcList.splice(index, 1)
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    downloadcontractform() {
      if (this.isEsUser()) {
        window.location.href =
          common.commonApi +
          'api-e/cs/contract/expand/es/downloadcontractform?access_token=' +
          localStorage.getItem('access_token')
      } else {
        window.location.href =
          common.commonApi +
          'api-e/cs/contract/expand/downloadcontractform?access_token=' +
          localStorage.getItem('access_token')
      }
    },
    callBackResult(val) {
      this.upLoadFile = val
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0 !important;
  form.el-form {
    background: #fff;
    .selectWidth {
      width: 100%;
    }
    .topTitle {
      background: #e4ebf1;
      height: 67px;
      padding-left: 24px;
      font: bold 18px/67px Microsoft YaHei;
    }
    .titleInfo {
      background: #e4ebf1;
      width: 108px;
      height: 36px;
      text-align: center;
      color: #fff;
      margin-top: 35px;
      margin-bottom: 20px;
      font: bold 14px/36px Microsoft YaHei;
    }
    .identityInfoTitle {
      background: #02a2aa;
    }
    div#readIdCardBox {
      width: 200px;
      text-align: center;
    }
    .driveDownload {
      color: #0098ce;
      font-size: 11px;
      margin-top: 10px;
      border-bottom: 1px solid #0098ce;
      text-align: center;
      &:hover {
        color: #0070f5;
        border-bottom: 1px solid #0070f5;
      }
    }
    .basicInfoTitle {
      background: #67ace4;
    }
    .contractInfoTitle {
      background: #f9a243;
    }
    .uploadBox {
      position: relative;
      .uploadImg {
        width: 96px;
        height: 36px;
        color: #009588;
        border: 1px solid #009588;
        line-height: 10px;
      }
      .uploadImgState {
        font-size: 14px;
        color: #999999;
        margin-left: 11px;
      }
      .upLoadDom {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        input {
          width: 100px;
          height: 36px;
        }
      }
    }
    .imgStyle {
      padding-left: 100px;
      li {
        position: relative;
        margin-right: 20px;
        margin-top: 10px;
        i {
          position: absolute;
          right: -6px;
          top: -10px;
          font-size: 20px;
        }
      }
    }
    .wageUnit {
      font-size: 14px;
      color: #666;
      padding: 8px 4px 8px 10px;
    }
    .saveBtn {
      background-color: #009588;
      border-color: #009588;
      color: #fff;
    }
  }
  .el-main .el-form-item {
    margin-bottom: 20px;
  }
  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    /* width: 350px; */
    width: 100%;
  }
}
// 添加人员指引
.shade {
  position: fixed;
  background: #eee;
  top: 105px;
  left: 230px;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: #f5f7fa;
  div {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    img {
      width: 100%;
    }
  }
}
.topContent {
  background: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 24px;
  border-bottom: 1px solid #eee;
  .titleTop {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  .alignRight {
    text-align: right;
  }
}
</style>
